<template>
  <div class="share-setting-view">
    <p class="project-setting-title">
      团队协作
      <span class="small-font-size ml20 text-secondary-color">
        自定义哪些用户，角色，部门拥有跟问卷创建人一样的权限，可以协作管理问卷
      </span>
    </p>
    <el-divider />
    <el-table
      class="m10"
      :data="tableData"
    >
      <el-table-column
        prop="collaborator"
        label="协作者"
      />
      <el-table-column
        prop="typeDesc"
        label="类型"
      />
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="ml10">
      <el-button type="primary" @click="handleOpenDialog">
        添加协作
      </el-button>
    </div>
    <user-choose-table ref="userChooseTable"
                       @submit="(val)=>submitChooseHandle('user',val)"
    />
    <role-choose-table ref="roleChooseTable"
                       @submit="(val)=>submitChooseHandle('role',val)"
    />
    <dept-choose-tree ref="deptChooseTree"
                      @submit="(val)=>submitChooseHandle('dept',val)"
    />
    <el-dialog
      :visible.sync="authDialogVisible"
      title="添加协作者"
      width="30%"
    >
      <el-form :model="authObjectForm" label-position="top" label-width="80px">
        <el-form-item label="用户">
          <el-row :gutter="20">
            <el-col :span="23">
              <el-select
                v-model="authObjectForm.userIdList"
                class="width-full" multiple placeholder="请选择用户"
                @remove-tag="event=>{handleRemoveUserTag(event,'userList','id')}"
                @click.native="openChooseHandle('userChooseTable',selectedObj.userList)"
              >
                <el-option
                  v-for="item in selectedObj.userList"
                  :key="item.id"
                  :label="item.userName"
                  :value="item.id"
                />
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="角色">
          <el-row :gutter="20">
            <el-col :span="23">
              <el-select
                v-model="authObjectForm.roleIdList"
                class="width-full"
                multiple placeholder="请选择角色"
                @remove-tag="event=>{handleRemoveUserTag(event,'roleList','id')}"
                @click.native="openChooseHandle('roleChooseTable',selectedObj.roleList)"
              >
                <el-option
                  v-for="item in selectedObj.roleList"
                  :key="item.id"
                  :label="item.roleName"
                  :value="item.id"
                />
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="部门">
          <el-row :gutter="20">
            <el-col :span="23">
              <el-select
                v-model="authObjectForm.deptIdList"
                class="width-full"
                multiple
                placeholder="请选择部门" @remove-tag="event=>{handleRemoveUserTag(event,'deptList','id')}"
                @click.native="openChooseHandle('deptChooseTree',selectedObj.deptList)"
              >
                <el-option
                  v-for="item in selectedObj.deptList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="authDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addShareCollaboratorRequest,
  deleteCollaboratorRequest,
  getShareCollaboratorRequest
} from "@/api/project/setting"
import UserChooseTable from '@/views/system/user/chooseTable'
import RoleChooseTable from '@/views/system/role/chooseTable'
import DeptChooseTree from '@/views/system/dept/chooseTree'
import mixin from "./mixin"

export default {
  name: 'Teamwork',
  components: {
    DeptChooseTree,
    RoleChooseTable,
    UserChooseTable
  },
  mixins: [mixin],
  data() {
    return {
      settingRules: {},
      tableData: [],
      authDialogVisible: false,
      // 授权问卷对象
      authObjectForm: {
        formKey: '',
        userIdList: [],
        roleIdList: [],
        deptIdList: []
      },
      // 选中对象 如用户角色 等
      selectedObj: {
        userList: [],
        roleList: [],
        deptList: []
      }
    }
  },
  mounted() {
    this.getCollaboratorList()
  },
  methods: {
    getCollaboratorList() {
      getShareCollaboratorRequest(this.formKey).then((res) => {
        this.tableData = res.data
      })
    },
    crateAuthGroupHandle() {
      this.$refs.authGroup.clearFormAuthGroup()
      this.$refs.authGroup.dialogVisible = true
    },
    handleRemoveUserTag(val, name, key) {
      this.selectedObj[name] = this.selectedObj[name].filter((item) => item[key] !== val)
    },
    handleOpenDialog() {
      this.authDialogVisible = true
    },
    // 打开选择窗口
    openChooseHandle(name, val) {
      this.$refs[name].showDialog(val)
    },
    // 选中数据事件
    submitChooseHandle(name, val) {
      this.$set(this.selectedObj, `${name}List`, val)
      this.$set(this.authObjectForm, `${name}IdList`, val.map((item) => item.id))
    },
    handleDelete(row) {
      this.$confirm('是否确认取消该协作者?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return deleteCollaboratorRequest(row)
      }).then(() => {
        this.getCollaboratorList()
        this.msgSuccess('取消成功')
      }).catch(() => {
      })
    },
    handleSubmit() {
      this.authObjectForm.formKey = this.formKey
      addShareCollaboratorRequest(this.authObjectForm).then((res) => {
        this.msgSuccess('添加成功')
        this.getCollaboratorList()
        this.authDialogVisible = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.share-setting-view {
  height: 100%;
  line-height: 20px;
  border-radius: 7px;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 100);
  background-color: white;
  padding: 10px;
  margin-left: 20px;

  .project-setting-title {
    color: rgba(16, 16, 16, 100);
    font-size: 18px;
    font-weight: 550;
    margin-left: 20px;
  }
}
</style>
